<template>
	<!-- 使用 page-meta 组件配合阻止滚动穿透 ,page-meta一定作为页面的第一个节点-->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

	<uni-popup ref="addPopup" type="bottom" @change="changePop" :safeArea="false">
		<my-add-fridge-pop @close="addPopClose"></my-add-fridge-pop>
	</uni-popup>

	<view class="userinfo-container">
		<view class="header" v-if="token" @click="gotoUserInfo">
			<!-- 头像昵称区域 -->
			<view class="header-box">
				<image :src="userinfo.avatarUrl" class="avatar" @longpress.stop="logout"></image>
				<view class="text-msg">
					<text class="nickname">{{userinfo.nickName||"微信用户"}}</text>
				</view>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		<view class="header" v-else>
			<!-- 头像昵称区域 -->
			<view class="header-box" @click="login">
				<uni-icons type="contact" size="100" color="#000"></uni-icons>
				<view>点击登录</view>
			</view>
		</view>

		<view class="menu-list">
			<view class="menu-item" hover-class="hover-menu-item" v-for="(item,i) in menu_list"
				:style="{margin:item.margin,'border-radius':item.radius}" :key="i" @click="menuClickHandler(i)">
				<view class="item-box" :style="{'border-bottom':(i===2? '1rpx solid #e5e6eb':'')}">
					<iconfont :name="item.icon" :size="25"></iconfont>
					<view class="right">
						<text>{{item.text}}</text>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				show: false,
				menu_list: [{
					text: '我的设备',
					margin: '3%',
					radius: '20rpx',
					icon: 'fridge'
				}, {
					text: '购物清单',
					margin: '4% 3% 3% 3%',
					radius: '20rpx',
					icon: 'target'
				}, {
					text: '成员管理',
					margin: '0 3%',
					radius: '20rpx 20rpx 0 0',
					icon: 'member'
				}, {
					text: '存取记录',
					margin: '0 3%',
					radius: '0 0 20rpx 20rpx',
					icon: 'record'
				}, {
					text: '个人偏好设置',
					margin: '3%',
					radius: '20rpx',
					icon: 'all'
				}]
			};
		},
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		computed: {
			...mapState('user', ['userinfo', 'token']),
			...mapState('fridge', ['default_fridge']),
		},
		methods: {
			...mapMutations('user', ['updateUserInfo', 'updateToken']),

			// 请求
			login() {
				this.beforeJump()
			},

			// 跳转
			gotoUserInfo() {
				// return uni.$showMsg('仅体验用户可用')
				uni.navigateTo({
					url: '/pagesSub/pageUser/userinfo/userinfo'
				})
			},
			menuClickHandler(index) {

				if (!this.default_fridge.fid)
					return this.beforeJump()
				if (index == 0)
					return uni.navigateTo({
						url: '/pagesSub/pageFridge/fridge_list/fridge_list'
					})
				if (index == 1)
					return uni.navigateTo({
						url: '/pagesSub/pageMenu/cart/cart'
					})
				if (index == 2)
					return uni.navigateTo({
						url: '/pagesSub/pageUser/member_manage/member_manage?fridge=' + JSON.stringify(this
							.default_fridge)
					})
				if (index == 3)
					return uni.navigateTo({
						url: '/pagesSub/pageFridge/op_record/op_record?fid=' + this.default_fridge.fid
					})
				if (index == 4)
					return uni.navigateTo({
						url: '/pagesSub/pageUser/obj_setting/obj_setting'
					})
			},

			// 事件处理
			// 退出登录
			async logout() {
				// 询问用户是否退出登录
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)

				if (succ && succ.confirm) {
					// 用户确认了退出登录的操作
					// 需要清空 vuex 中的 userinfo、token 
					this.updateUserInfo({})
					this.updateToken('')
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			},

			beforeJump() {
				uni.showModal({
					title: 'Tips',
					content: '您尚未绑定冰箱，请先绑定冰箱',
					success: (res) => {
						if (res.confirm) {
							this.$refs.addPopup.open()
						}
					}
				})
			},
			changePop(e) {
				this.show = e.show
			},
			addPopClose() {
				this.$refs.addPopup.close()
			},
		}
	}
</script>

<style lang="scss">
	.userinfo-container {
		display: flex;
		flex-direction: column;

		.header {
			margin-top: 5%;
			height: 200rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			font-size: 50rpx;
			color: black;
			margin-left: 3%;
			margin-right: 3%;
			border-radius: 20rpx;
			justify-content: space-between;
			padding: 30rpx;

			.header-box {
				display: flex;
				align-items: center;

				.avatar {
					display: block;
					width: 150rpx;
					height: 150rpx;
					border-radius: 50px;
					margin-right: 40rpx;
				}

				.text-msg {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					height: 150rpx;
				}
			}

		}

		.menu-list {
			.menu-item {
				padding: 0 30rpx;
				background: #ffffff;

				.item-box {
					display: flex;
					align-items: center;

					.right {
						display: flex;
						justify-content: space-between;
						font-size: 18px;
						flex: 1;
						padding: 30rpx 0;

						>text {
							margin-left: 15px;
							white-space: nowrap;
						}
					}
				}

			}

			.hover-menu-item {
				background-color: #f1f1f1;
			}
		}
	}
</style>